<template>
  <view>
    <!-- 搜索框区域 -->
    <view class="search-box">
      <uni-search-bar :value="kw" @input="input" :radius="100" cancelButton="none"></uni-search-bar>
    </view>
    <!-- 搜索建议列表区域 -->
    <view class="suggest-list" v-if="searchList.length !== 0">
      <view class="suggest-item" v-for="item in searchList" :key="item.goods_id" @click="goSearch(item.goods_id)">
        <view class="content">{{item.goods_name}}</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史区域 -->
    <view class="search-history" v-else>
      <view class="history-title">
        <text>搜索记录</text>
        <uni-icons type="trash" size="17" @click="clearHistory"></uni-icons>
      </view>
      <view class="history-list">
        <uni-tag :text="item" :inverted="true" type="primary" v-for="(item, i) in historys" :key="i" @click="toSearchKW(item)"></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    shopSearchList
  } from '../../api/request';
  export default {
    data() {
      return {
        // 防抖阀
        timer: null,
        // 搜索关键词
        kw: '',
        // 搜索建议列表
        searchList: [],
        // 搜索记录
        historyList:['苹果','小米','戴尔']
      };
    },
    created() {
       this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
    },
    computed:{
      //历史记录
       historys() {         
          return [...this.historyList].reverse()
        }
    },
    methods: {
      // 监听输入框输入事件
      input(e) {
        // console.log(e);
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.kw = e
          this.getSearchList(this.kw)
        }, 1000)
      },
      // 获取搜搜建议列表
      async getSearchList(key) {
        if (this.kw.length === 0) {
          this.searchList = []
        }
        const { data: res } = await shopSearchList(key)
        if (res.meta.status !== 200) return uni.$showMsg()
        this.searchList = res.message
        this.saveHistory()
      },
      // 保留搜索记录
      saveHistory(){
        const set = new Set(this.historyList)
        set.delete(this.kw)
        set.add(this.kw)
        this.historyList = Array.from(set)         
        uni.setStorageSync('kw', JSON.stringify(this.historyList))
      },
      // 清除搜索记录
      clearHistory(){
        this.historyList = []
         uni.setStorageSync('kw', '[]')
      },
      // 点击记录发起搜索
      toSearchKW(kw){
        this.getSearchList(kw)
        this.kw = kw
      },
      // 跳转到搜索页面
      goSearch(id){
        uni.navigateTo({
           url: '/subpkg/goods_detail/goods_detail?goods_id=' + id
        })
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #1677ff;
    height: 50px;
  }

  .suggest-list {
    padding: 0 5px;

    .suggest-item {
      font-size: 12px;
      padding: 13px 0;
      border-bottom: 2px solid #efefef;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
         margin-right: 3px;
      }
    }
  }

.search-history{
  
  .history-title{
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    border-bottom: 1px solid #efefef;
    text{
       font-size: 12px;
    }
  }
  .history-list{
    display: flex;
    flex-wrap: wrap;
    padding: 5px 5px;
    .uni-tag{
      padding-top:5px ;
      margin-right: 10px;
    }
  }
}
</style>